
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    
    <div class="box"></div>
    <script>
        // “Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML(json取代)） 是一门集合html、css、js的页面局部刷新综合技术。
        // Ajax可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。解决了传统方法的缺陷。
    
        // Ajax核心  XMLHttpRequest对象  浏览器中异步请求对象
    
        // ajax的原理：
        // 在用户发起某个操作(http请求)时，JavaScript代码创建一个XMLHttpRequest对象，
        // 通过这个对象发送HTTP请求到服务器。服务器处理请求后，将数据（JSON格式）返回给客户端。
        // 然后，JavaScript解析返回的数据，并使用DOM操作更新页面的相应部分，整个过程不需要刷新整个页面

    //    1. 创建 XMLHTTPRequest 对象
    // 　  2. 使用 open 方法设置和服务器的交互信息
    // 　　3. 设置发送的数据，开始和服务器端交互
    // 　　4. 返回请求结果（成功和失败），注册事件
    // 　　5. 更新界面


        //     1. 创建 XMLHttpRequest 对象

        const xhr = new XMLHttpRequest()
        console.log(xhr.readyState);
        
        // 2. 使用 open 方法设置和服务器的交互信息

        xhr.open("get","https://hmajax.itheima.net/api/news",true)//异步
        console.log(xhr.readyState);

        // 　　3. 设置发送的数据，开始和服务器端交互
        xhr.send(null)
         // 　　4. 返回请求结果（成功和失败），注册事件
         console.log(xhr.readyState);
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState);
            if (xhr.readyState==4 && xhr.status == 200) {
                console.log(xhr.response);
                const data = JSON.parse( xhr.response)
                console.log(data);
                render(data)
            }
        }

        // 　　5. 更新界面

        function render(data) {
            document.querySelector(".box").innerHTML = data.message
        }


    </script>
</body>
</html>